<template>
    <div class="orderList_calss list_box phoneBac" v-show="isShowList">
        <div class="list_header">
            <span class="title">
                订单列表
            </span>
            <div class="list_operation_box">
                <div class="back" @click="close">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="divider_line"></div>
        </div>
        <div class="table_box" v-if="dataList">
            <el-table
                highlight-current-row
                :data="dataList.rows"
                height="100%"
                attr="dsafasfsafsdaf"
                border
                ref="dataListTable"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                @cell-mouse-enter="mouseList"
                @cell-mouse-leave="mouseout"
            >
                <!-- <el-table-column fixed="left" type="selection" width="40px"></el-table-column> -->
                <el-table-column
                    :prop="item.value"
                    :label="item.label"
                    :width="item.value === 'file_name' ? '310px' : item.width"
                    height="50"
                    align="center"
                    v-for="(item, id) in tableHeader"
                    :show-overflow-tooltip="
                        item.value === 'file_name' ||
                            item.value === 'leftTop' ||
                            item.value === 'rightTop' ||
                            item.value === 'leftBottom' ||
                            item.value === 'rightBottom'
                    "
                    :key="id"
                ></el-table-column>
                <el-table-column align="center" fixed="right" label="操作" width="150px">
                    <template slot-scope="scope">
                        <span class="editor_btn" @click="delData(scope.row)">
                            删除
                        </span>
                        <span v-if="!isPhone" class="editor_btn" @click="download(scope.row)">
                            下载
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-else>暂无订单信息</div>
        <div class="list_pagination phone_pagination" v-if="dataList">
            <el-pagination
                @current-change="handleCurrentChange"
                :small="isPhone"
                :current-page="dataList.page"
                :pager-count="5"
                :page-size="dataList.size"
                :layout="isPhone ? 'total, prev, pager, next ' : 'total, prev, pager, next,jumper'"
                :total="dataList.total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
/* global Y_BASE_URL */
import paramManager from './paramManager';
import dataQueryFunc from '../dataQueryFunc';
import { delOrder, downloadCheck } from 'S/order';
import dataCenterBus from 'U/dataCenterBus';
export default {
    name: 'areaDis',
    components: {},
    data() {
        return {
            url: Y_BASE_URL,
            isShowList: true,
            isPhone: this.$store.state.isPhone,
            dataList: paramManager.getDataList(),
            tableHeader: [
                { label: '名称', value: 'file_name', width: '110px' },
                { label: '大小（M）', value: 'file_size', width: '100px' },
                { label: '类型', value: 'product_type', width: '70px' },
                { label: '分辨率（m）', value: 'resolution', width: '113px' },
            ],
            page: 1, // 当前页
            pageSize: 5, // 每页条数
            multipleSelection: [], // 右侧列表的已选中的数组
            onceChange: false,
            disAll: true,
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.$refs.dataListTable.doLayout();
        });
    },
    methods: {
        initData() {
            paramManager.resetQueryParam();
        },
        // 多选框改变
        handleSelectionChange(val) {
            setTimeout(() => {
                if (this.dataList.rows && this.dataList.rows.length > 0) {
                    this.dataList.rows.forEach(item => {
                        let choicedNode = val.map(itemTwo => itemTwo.gid);
                        let index = this.multipleSelection.findIndex(
                            itemChoice => itemChoice.gid === item.gid
                        );
                        if (choicedNode.includes(item.gid)) {
                            dataQueryFunc.checkSheetChange(item, true);
                            if (index === -1) {
                                this.multipleSelection.push(item);
                            }
                        } else {
                            dataQueryFunc.checkSheetChange(item, false);
                            if (index !== -1) {
                                this.multipleSelection.splice(index, 1);
                            }
                        }
                    });
                }
            }, 0);
        },
        // 之前的选中结果在此页默认选中
        changeChoiced() {
            // 使用宏任务和微任务的时间差，让之前已选择框的选中操作在table的选择框状态改变的回调函数之前执行
            this.$nextTick(() => {
                if (this.dataList.rows && this.dataList.rows.length > 0) {
                    let gidArr = this.multipleSelection.map(item => item.gid);
                    this.dataList.rows.forEach(item => {
                        if (gidArr.includes(item.gid)) {
                            this.$refs.dataListTable.toggleRowSelection(item, true);
                        }
                    });
                }
            });
        },
        // 展示已选中的
        disSelected() {
            let ids = [];
            if (this.multipleSelection.length > 0) {
                ids = this.multipleSelection.map(item => item.id);
            } else {
                this.$message.warning('请选择至少一条数据');
                return;
            }
            this.disAll = false;
            paramManager.setParam('ids', ids);
            paramManager.setParam('isOnlyChoice', true);
            paramManager.setParam('currentPage', 1);
        },
        // 展示全部的
        disAllData() {
            this.disAll = true;
            paramManager.setParam('isOnlyChoice', false);
            paramManager.setParam('currentPage', 1);
        },
        // 清空选中
        clearSelected() {
            this.multipleSelection = [];
            this.disAllData();
        },
        // 翻页
        handleCurrentChange(val) {
            paramManager.setParam('currentPage', val);
        },
        // 鼠标移入
        mouseList(row) {
            dataQueryFunc.currentItem(row.gid, true);
        },
        // 鼠标移出
        mouseout(row) {
            dataQueryFunc.currentItem(row.gid, false);
        },
        // 删除订单
        async delData(item) {
            let res = await delOrder({ id: item.id });
            if (res.status === 200) {
                this.$message.success('删除下载订单成功');
                this.$store.commit('set_orderNumCode', !this.$store.state.orderNumCode);
                this.handleCurrentChange(1);
            }
        },
        // 下载
        async download(item) {
            let loginSign = this.userPermissions();
            if (item.url && loginSign) {
                let res = await downloadCheck({ productId: item.product_id });
                if (res.status === 200) {
                    if (res.data) {
                        window.location.href = `${this.url}public/down?url=${item.url}`;
                    } else {
                        this.$message.warning('已超下载上限');
                    }
                }
            }
        },
        // 查看用户是否登录
        userPermissions() {
            let isLogin = true;
            let token = localStorage.getItem('userAuthorization');
            if (!token) {
                dataCenterBus.$emit('isLogin', true);
                isLogin = false;
            }
            return isLogin;
        },
        close() {
            this.$parent.ctrlOrderListDis('clear');
        },
    },
    watch: {
        dataList: {
            handler(val) {
                if (val.rows.length > 0) {
                    val.rows.forEach(item => {
                        item.gid = item.id;
                    });
                }
                this.changeChoiced();
            },
            deep: true,
        },
    },
};
</script>
<style lang="scss">
@import './theme/css/orderList.scss';
.back {
    cursor: pointer;
    float: right;
    font-size: 22px;
    margin-left: 5px;
    color: #00e3e4;
}
</style>
